<template>
	<div>
		<el-row>
			<el-col :span="24">
				<el-form :inline="true" :model="state.query">
					<el-form-item label="项目编号">
						<el-input clearable v-model="state.query.code" placeholder="项目编号" />
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="init">搜索</el-button>
					</el-form-item>
				</el-form>
			</el-col>
		</el-row>
		<el-row style="padding-bottom: 10px">
			<el-col :span="24" >
				<el-button type="primary"  @click="manual">手动录入</el-button>
			</el-col>
		</el-row>
		<el-row>
			<el-col :span="24">
				<el-table :data="state.ProjectList" border style="width: 100%">
					<el-table-column prop="code" label="项目编号" align="center" width="160"/>
					<el-table-column prop="projectName" label="项目名称" align="center" width="300"></el-table-column>
					<el-table-column prop="amount" label="总金额（元）" align="center"></el-table-column>
					<el-table-column prop="deposit" label="定金（元）" align="center"></el-table-column>
					<el-table-column prop="deliveryTime" label="交付日期" align="center" width="138">
						<template #default="props">
							{{ props.row.deliveryTime === null ? '-' : props.row.deliveryTime }}
						</template>
					</el-table-column>
					<el-table-column prop="createTime" label="提交时间" align="center" width="180"/>
					<el-table-column prop="status" label="项目进度" align="center" width="120">
						<template #default="props">
							<el-tag type="primary" v-if="props.row.status === 4">已录入</el-tag>
							<el-tag type="primary" v-else>未知进度</el-tag>
						</template>
					</el-table-column>
					<el-table-column prop="isPayment" label="支付情况" align="center" width="120">
						<template #default="props">
							<el-tag type="primary" v-if="props.row.isPayment === 1">总额</el-tag>
							<el-tag type="primary" v-else-if="props.row.isPayment === 2">定金</el-tag>
							<el-tag type="primary" v-else-if="props.row.isPayment === 3">不支付</el-tag>
							<el-tag type="primary" v-else>未知进度</el-tag>
						</template>
					</el-table-column>
					<el-table-column label="详情操作" align="center">
						<template #default="props">

							<el-button link type="primary" size="small" @click="info(props.row)">生成支付链接</el-button>
							<el-button link type="primary" size="small" @click="info(props.row)">修改</el-button>
							<el-button link type="primary" size="small" @click="info(props.row)">删除</el-button>
						</template>
					</el-table-column>
				</el-table>
			</el-col>
		</el-row>
		<div class="pagination-container">
			<el-pagination
				:page-size="state.pageValidate.pageSize"
				layout="prev, pager, next"
				:total="state.pageValidate.total"
				@current-change="handleCurrentChange"
			/>
		</div>
		<ProjectDocComponents
			:visible=state.infoDialogVisible
			:user-info=state.userInfo
			:project-info=state.projectInfo
			@close-dialog="state.infoDialogVisible = false"
		/>
		<el-dialog
			v-model="state.manualInputdialogVisible"
			title="手动录入项目"
			width="500"
		>
			<el-form :model="state.manualFrom" label-width="auto" style="max-width: 600px">
				<el-form-item label="项目编号：">
					<el-input v-model="state.manualFrom.code" />
				</el-form-item>

				<el-form-item label="项目名称：">
					<el-input v-model="state.manualFrom.projectName" />
				</el-form-item>

				<el-form-item label="总金额：">
					<el-input-number v-model="state.manualFrom.amount" :precision="2" :step="0.1" :max="50000" />
				</el-form-item>
				<el-form-item label="定金：">
					<el-input-number v-model="state.manualFrom.deposit" :precision="2" :step="0.1" :max="50000" />
				</el-form-item>
				<el-form-item label="需要支付类型：">
					<el-radio-group v-model="state.manualFrom.isPayment">
						<el-radio value="1" size="large">总额</el-radio>
						<el-radio value="2" size="large">定金</el-radio>
						<el-radio value="3" size="large">不支付</el-radio>
					</el-radio-group>
				</el-form-item>
			</el-form>
			<template #footer>
				<div class="dialog-footer">
					<el-button @click="state.manualInputdialogVisible = false">取消</el-button>
					<el-button type="primary" @click="enter">
						生成项目订单
					</el-button>
				</div>
			</template>
		</el-dialog>
	</div>
</template>
<script setup lang="ts">
const state = reactive(<any>{
	path:"",
	DomenetFrom:{},
	manualInputdialogVisible:false,
	palyForm:{},
	activeName:0,
	manualDialogVisible: false,
	completionDialogVisible: false,
	pageValidate: {
		pageNo: 1,
		pageSize: 8,
		total: 0
	},
	query: {
		status: 0,
		code:""
	},
	ProjectList: [],
	updateFrom: {
		id: '',
		nickName: '',
		cellPhone: '',
		imageUrl: '',
		status: '',
		roleType: ''
	},
	userInfo:{},
	projectInfo:{},
	completionForm:{},
	userList:[],
	orderList:[],
	manualFrom:{
		isPayment:"3",
		status:4,
		amount:0.00
	}
})
/**
 * 手动录入
 */
function manual() {
	state.manualInputdialogVisible = true
	const timestampInMilliseconds = Date.now();
	state.manualFrom.code = "X" + timestampInMilliseconds
}

/**
 * 确定订单
 */
function enter() {
	http.post("/api/project/enter",state.manualFrom).then(response =>{
		state.manualInputdialogVisible = false
		toast.success("录入成功")
	})
}
/**
 * 详情信息
 */
const info = (row:any) => {
	state.infoDialogVisible = true
	state.userInfo = row.adminCusUserVo
	state.projectInfo = row
}
/**
 * 初始化
 */
function init() {
	state.ProjectList = []
	http.post('/api/admin/project/page', {
		  status: 4,
			pageValidate:  state.pageValidate
	}).then((res: any) => {
		state.pageValidate.pageNo = res.data.pageNo
		state.pageValidate.pageSize = res.data.pageSize
		state.pageValidate.total = res.data.count
		state.ProjectList = res.data.lists
	})
}
function userInfo() {
	//获取用户信息列表
	http.get('/api/admin/user/list').then(res =>{
		state.userList = res.data
	})
}
userInfo()

/**
 * 分页
 * @param val
 */
const handleCurrentChange = (val: number) => {
	state.pageValidate.pageNo = val
	init()
}



onMounted(()=>{
	init()
})

</script>
<style scoped>

:deep(.el-form-item__content) {
	width: 150px;
}

.pagination-container {
	display: flex;
	justify-content: center;
	margin-top: 20px; /* 可根据需要调整外边距 */
}

:deep(.el-dialog){
	background-color: #ebf0f9;
}

:deep(.avatar-uploader .el-upload) {
	border: 1px dashed var(--el-border-color);
	border-radius: 6px;
	cursor: pointer;
	position: relative;
	overflow: hidden;
	transition: var(--el-transition-duration-fast);
}

:deep(.avatar-uploader .el-upload:hover) {
	border-color: var(--el-color-primary);
}

:deep(.el-icon.avatar-uploader-icon) {
	font-size: 28px;
	color: #8c939d;
	width: 178px;
	height: 178px;
	text-align: center;
}
</style>
